<script lang="ts" setup>
import { NIcon } from 'naive-ui'
import { CloseOutlined } from '@vicons/antd'

import { useFlowStore, getTaskStatusClass } from '../../../flowStore'

const props = defineProps(["node"])
const flowStore = useFlowStore()
</script>
<template>
    <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), 'flow-card']"
        @click="flowStore.openNode(props.node.nodeId)">
        <div class="flow-card-header">
            <div style="height:100%;display:flex;line-height:36px;">
                <div style="height: 100%;display: flex;align-items: center;">
                    <n-icon size="18">
                        <slot name="icon"></slot>
                    </n-icon>
                </div>
                {{ props.node.nodeName }}
            </div>
            <div @click="flowStore.deleteNode(props.node.nodeId)"
                style="height: 100%;width: 32px;display: flex;justify-content: flex-end;align-items: center;">
                <n-icon v-if="['0'].includes(flowStore.mode)" size="18">
                    <close-outlined />
                </n-icon>
            </div>
        </div>
        <div class="flow-card-content">
            <slot name="default"></slot>
        </div>
    </div>
</template>
<style scoped></style>